import React from "react";
import { Card, Button, Spin, Icon, Alert } from "antd";
import './ui.less'

export default class Loading extends React.Component{
    render(){
        const icon123 =<Icon type="loading" style={{fontSize:"24px"}}></Icon>

        return(
            <div>
                <Card title="Spin用法" className="cardbox">
                    {/* Spin样式*/}
                    <Spin size="small" className="spin-mg"/>
                    <Spin className="spin-mg"/>
                    <Spin size="large" className="spin-mg" />
                    <Spin indicator={icon123} className="spin-mg"  />
                </Card>    

                <Card title="内容遮罩" className="cardbox">

                    {/* 样式1 */}
                    <Alert
                        message="info"
                        description="内容内容内容内容内容内容"
                        type="info"
                    > 
                    </Alert>

                    {/* 样式2 */}
                    <Alert
                        message="warning"
                        description="内容内容内容内容内容内容"
                        type="warning"
                    > 
                    </Alert>

                    {/* 样式3 */}
                    <Spin size="large">
                        <Alert
                            message="info"
                            description="内容内容内容内容内容内容"
                            type="info"
                        > 
                        </Alert>
                    </Spin>

                    {/* 样式4 */}
                    <Spin size="large" tip="加载中..." indicator={icon123}>
                        <Alert
                            message="info"
                            description="内容内容内容内容内容内容"
                            type="info"
                        > 
                        </Alert>
                    </Spin>
                </Card>  
            </div>
        )
    }
}